<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
    <link rel="stylesheet" href="style/common.css">
    <style>
        .nd-form{
            width: 900px;
            border: 1px solid #ccc;
            padding: 20px;
            font-size: 14px;
        }
        .nd-form input,.nd-form select,.nd-form textarea{
            border: 1px solid #999;
            width: 150px;
            padding: 3px 2px;
        }
        .nd-form select{
            width: 155px;
        }
        .nd-row{
            overflow: hidden;
            margin-bottom: 10px;
        }
        .ndr-box{
            width: 50%;
            float: left;
        }
        .full-row .ndr-box{
            width: 100%;
        }
        .nd-row label{
            width: 75px;
            display: inline-block;
            vertical-align: top;
        }
        .nd-row.sign-green{
            color: green;
        }
        .nd-row.sign-red{
            color: red;
        }
        .nd-form textarea{
            width: 600px;
        }
        .ladder{
            border:1px solid #999;
            padding: 10px 5px;
        }
        .ladder .ndr-box{
            width: 150px;
        }
        .ladder input[type=text],.ladder select{
            width: 60px;
        }
        .ladder.nd-row label{
            width: 70px;
        }
        .ladder .btns-group-opera{
            width: auto;
        }
        .ladder-box{
            overflow: hidden;
            margin-bottom: 10px;
        }
        .btns-group-opera .btn-delete,.btns-group-opera .btn-add{
            display: inline-block;
            width: 20px;
            height:5px;
            background: #000;
            line-height: 0;
            font-size:0;
            cursor: pointer;
            vertical-align: middle;
        }
        .btn-delete{
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        .btn-add{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }
        .btn-delete:after,.btn-add:after{
            content:'/';
            display:block;
            width: 20px;
            height:5px;
            background: #000;
            -webkit-transform: rotate(-90deg);
        }
        .ladder .total{
            padding-left: 500px;
        }
        .ladder .total .ndr-box{
            width: auto;
        }
    </style>
</head>
<body>
    <div class="nd-form">
        <div class="nd-row">
            <div class="ndr-box">
                <label>预定时间：</label>
                <input type="text">
            </div>
        </div>
        <div class="nd-row">
            <div class="ndr-box">
                <label>渠道：</label>
                <select>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                </select>
            </div>
            <div class="ndr-box">
                <label>供应商：</label>
                <select>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                    <option value="0">11111</option>
                </select>
            </div>
        </div>
        <div class="nd-row">
            <div class="ndr-box">
                <label>收入：</label>
                <input type="text">
            </div>
            <div class="ndr-box">
                <label>成本：</label>
                <input type="text">
            </div>
        </div>
        <div class="nd-row sign-green">
            <div class="ndr-box">
                <label>利润：</label>
                <span>1010101001</span>
            </div>
            <div class="ndr-box">
                <label>毛利率：</label>
                <span>1010101001</span>
            </div>
        </div>
        <div class="nd-row">
            <div class="ndr-box">
                <label>送客数量：</label>
                <input type="text">
            </div>
        </div>
        <div class="nd-row">
            <div class="ndr-box">
                <label>新人占比：</label>
                <input type="text">
            </div>
        </div>
        <div class="nd-row">
            <h3>价格阶梯</h3>
        </div>
        <div class="nd-row ladder">
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box">
                <div class="ndr-box">
                    <label>费用类型：</label>
                    <select>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                        <option value="0">间夜</option>
                    </select>
                </div>
                <div class="ndr-box">
                    <label>收入单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>成本单价：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>间夜数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box">
                    <label>订单数量：</label>
                    <input type="text">
                </div>
                <div class="ndr-box btns-group-opera">
                    <button class="btn-delete" title="删除">删除</button>
                    <button class="btn-add" title="添加">添加</button>
                </div>
            </div>
            <div class="ladder-box total">
                <div class="nd-row">
                    <div class="ndr-box">
                        <label>总间夜：</label>
                        <span>1010101001</span>
                    </div>
                </div>
                <div class="nd-row">
                    <div class="ndr-box">
                        <label>总收入：</label>
                        <span>1010101001</span>
                    </div>
                </div>
                <div class="nd-row sign-red">
                    <div class="ndr-box">
                        <label>总成本：</label>
                        <span>1010101001</span>
                    </div>
                </div>
                <div class="nd-row sign-green">
                    <div class="ndr-box">
                        <label>总利润：</label>
                        <span>1010101001</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="nd-row full-row">
            <div class="ndr-box">
                <label>备注：</label>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
        </div>
    </div>
</body>
</html>